<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="../static/cdn/axios/axios.min.js"></script>
    <script src="../static/js/vue.min.js"></script>
    <link rel="stylesheet" href="../static/cdn/element-ui/index.css"/>
    <script src="../static/cdn/element-ui/index.js"></script>
    <link href="../static/cdn/animate/animate.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../static/lib/index.css"/>
    <link rel="stylesheet" href="../static/css/style2.css" />
    <link rel="stylesheet" href="../static/css/common.css"/>
    <link rel="stylesheet" href="../static/css/iconfont.css"/>
    <link rel="stylesheet" href="../static/cdn/swiper/swiper.min.css"/>
    <link rel="stylesheet" href="../static/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../static/css/closefont/iconfont.css">
    <script src="../static/js/components.js"></script>

    <script src="../static/cdn/swiper/swiper.min.js"></script>
    <script src="../static/cdn/echarts/echarts.min.js"></script>
    <script src="../static/cdn/echarts-wordcloud.min.js"></script>
    <script src="../static/js/theme/avue.project.js"></script>
    <script src="../static/js/theme/halloween.project.js"></script>
    <script src="../static/js/theme/wonderland.project.js"></script>
    <script src="../static/cdn/sortable/Sortable.min.js"></script>
    <script src="../static/cdn/sortable/vuedraggable.umd.min.js"></script>
    <script src="../static/js/common.js?version=1.0"></script>
    <script src="../static/js/map.js"></script>
    <script src="../static/js/colorOption.js"></script>
    <script src="../static/js/imgOption.js"></script>
    <script src="../static/js/dicOption.js"></script>
    <!--图表初始化数据-->
    <script src="../static/js/newData.js"></script>
    <!--地图上加超链接(地理坐标图组件) -->
    <script src="../static/js/china.js"></script>
    <script src="../static/js/baseList.js"></script>
    <script src="../static/js/utils.js"></script>
    <script src="../static/js/avue.min.js"></script>

    <!--update-begin--Author:liangxs  Date:20191223 for：[3345]地图二次开发---------------------->
    <!--异步注册地图-->
    <script src="../static/js/register_map.js"></script>
    <!--通用地图组件-->
    <script src="../static/js/province_map.js"></script>
    <!--派件地图组件-->
    <script src="../static/js/virtualmap.js"></script>
    <!--全国物流组件-->
    <script src="../static/js/geo_coord.js"></script>
    <!--城市派件地图数据初始化js-->
    <script src="../static/js/init_virtualmap.js"></script>
    <!--全国物流地图数据初始化js-->
    <script src="../static/js/geo_coord_data.js"></script>
    <script src="../static/js/init_geo_coord.js"></script>

    <!--update-end--Author:liangxs  Date:20191223 for：[3345]地图二次开发---------------------->

    <!--校验保护码js-->
    <script src="../static/js/validateCode.js"></script>
    <!--Trend组件使用样式-->
    <style scoped>
        .chart-trend {
            display: inline-block;
            font-size: 20px;
            line-height: 22px;
            text-align: center;
        }

        .chart-trend .trend-icon {
            font-size: 12px;
        }

        .chart-trend .trend-icon.up, .chart-trend .trend-icon.down {
            margin-left: 4px;
            position: relative;
            top: 1px;
        }

        .chart-trend .trend-icon.up i, .chart-trend .trend-icon.down i {
            font-size: 12px;
            transform: scale(0.83);
        }

        .chart-trend .el-icon-caret-top {
            color: #f5222d;
        }

        .chart-trend .el-icon-caret-bottom {
            color: #52c41a;
            top: -1px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-dialog title="复制代码" :visible.sync="dataVisible" width="100%" fullscreen>
        <el-input type="textarea" v-model="listJson" :rows="30" ></el-input>
    </el-dialog>
    <el-dialog title="图库" :visible.sync="imgVisible">
        <el-tabs class="tabs" stretch v-model="imgActive">
            <el-tab-pane :name="index+''" v-for="(item,index) in imgTabs" key="index">
                <el-tooltip slot="label" effect="dark" :content="item.title" placement="top">
                    <div><i class="iconfont icon-peizhi"></i></div>
                </el-tooltip>
            </el-tab-pane>
        </el-tabs>
        <el-scrollbar class="imgList">
            <img :src="basePath+item.value" @click="handleSetimg(item.value)" v-for="(item,index) in imgOption[imgActive]"
                 :key="index" />
        </el-scrollbar>
    </el-dialog>
    <div class="keyboardDel" @keydown.delete="handleKeyboardDel(e,active,zIndex)"></div>
    <!--新增键盘事件-->
    <div class="keyboardArrow" @keyup="handleKeyboardEvent(e)"></div>
    <div class="contentmenu" v-show="contentMenu" :style="styleContentmenu" @click="contentMenu=false">
        <div class="contentmenu__item" @click="handleDel(active,zIndex)"> <i class="el-icon-close"></i>删除图层
        </div>
        <div class="contentmenu__item" @click="handleCopy(active,zIndex)"><i class="el-icon-document"></i>复制图层
        </div>
        <div class="contentmenu__item" @click="handleTop(active,zIndex)"><i class="el-icon-arrow-up"></i>置顶图层
        </div>
        <div class="contentmenu__item" @click="handleBottom(active,zIndex)"><i class="el-icon-arrow-down"></i>置底图层
        </div>
        <div class="contentmenu__item" @click="handleStepTop(active,zIndex)"><i class="el-icon-arrow-up"></i>上移一层
        </div>
        <div class="contentmenu__item" @click="handleStepBottom(active,zIndex)"><i class="el-icon-arrow-down"></i>下移一层
        </div>
    </div>
    <el-menu class="nav" mode="horizontal" background-color="#212528" text-color="#fff" active-text-color="#409EFF" @mousedown="handleMouseDown">
        <el-submenu :index="index+''" v-for="(item,index) in baseList" :key="index">
            <template slot="title">
                <el-tooltip effect="dark" :content="item.label" placement="top">
                    <i :class="'nav__icon iconfont '+item.icon"></i>
                </el-tooltip>
            </template>
            <el-menu-item @click="addCompoment(citem.option)" :key="cindex" :index="index+'-'+cindex"
                          v-for="(citem,cindex) in item.children">
                <i :class="'nav__icon iconfont '+citem.option.icon"></i>
                <span>{{citem.label}}</span>
            </el-menu-item>
        </el-submenu>
        <el-menu-item index="6" @click="handleReset" v-show="!menuFlag">
            <el-tooltip effect="dark" content="还原" placement="top">
                <i class="nav__icon iconfont icon-reset"></i>
            </el-tooltip>
        </el-menu-item>
        <el-menu-item index="7" @click="handleView" v-show="menuFlag">
            <el-tooltip effect="dark" content="预览" placement="top">
                <i class="nav__icon iconfont icon-view"></i>
            </el-tooltip>
        </el-menu-item>
        <el-menu-item index="8" @click="handleBuild">
            <el-tooltip effect="dark" content="生成" placement="top">
                <i class="nav__icon iconfont icon-build"></i>
            </el-tooltip>
        </el-menu-item>
        <el-menu-item index="9" @click="handleSave">
            <el-tooltip effect="dark" content="保存" placement="top">
                <i class="nav__icon iconfont icon-save"></i>
            </el-tooltip>
        </el-menu-item>
        <el-menu-item index="10" @click="handleBack">
            <el-tooltip effect="dark" content="关闭" placement="top">
                <i class="nav__icon iconfont icon-Close" style="font-size:17px"></i>
            </el-tooltip>
        </el-menu-item>
    </el-menu>
    <div class="app" :class="{'app--none':!menuFlag}">
        <div class="menu" v-show="menuFlag" @mousedown="handleMouseDown">
            <p class="title">图层</p>
            <draggable v-model="zIndexList">
                <div class="menu__item" v-show="!item.destruction" @contextmenu.prevent="handleContextMenu"
                     :class="{'menu__item--active':item.index===active}" v-for="(item,index) in zIndexList" :key="index"
                     @click="activeClick(item.index)" @mouseover="handleMouseOver(item.index)">
            <span class=" menu__icon">
              <i :class="'iconfont '+item.icon"></i>
            </span>
                    <span>{{item.title}}</span>
                </div>
            </draggable>
        </div>
        <div class="middle">
            <div class="wrapper__grade" @mousedown="handleMouseDown"></div>
            <div class="wrapper" @mousedown="handleMouseDown">
                <div class="content" ref="content" @mousedown.slef="handleSelectMouseDown" @mousemove="handleSelectMouseMove"
                     @mouseup.slef="handleSelectMouseUp">
                    <div class="selectall" :style="selectStyle" v-show="selectObj.show" ref="selectall"></div>
                    <div class="selectbg" v-show="selectObj.show"></div>
                    <div class="selectflag" ref="selectflag" v-show="selectObj.flag" @mousedown.stop="handleMoveMouseDown"
                         @mousemove="handleMoveMouseMove" @mouseup.stop="handleMoveMouseUp">
                    </div>
                    <div class="container" :style="styleName" ref="container" @contextmenu.prevent="handleContextMenu"
                         @mousedown="handleMouseDown">
                        <div class="grade" v-if="gradeFlag || config.gradeShow" :style="gradeLenStyle"></div>
                        <avue-draggable v-for="(item,index) in list" :scale="stepScale" :disabled="!menuFlag" :ref="'item_'+index"
                                        :id="'item_'+index" :step="stepScale" @focus="handleFocus" @postion="handlePostion"
                                        :resize="item.resize" @resize="handleResize" v-show="!item.destruction && !item.display"
                                        @blur="handleBlur" @change="handleChange" :index="index" :z-index="item.zIndex"
                                        :width="item.component.width" :height="item.component.height" :key="index" :top="item.top"
                                        :left="item.left" :highline="highline">
                            <avue-echart-slide v-if="item.component.prop==='slide'" :option="item.component.option"
                                               :width="item.width" :height="item.height">
                                <div class="swiper-slide" v-for="(citem,cindex) in item.child.index" :key="citem">
                                    <component :scale="stepScale" :width="item.component.width" :height="item.component.height"
                                               :ref="'list_'+index" :disabled="!menuFlag" :id="'component_'+index" :animation="!menuFlag"
                                               :is="'avue-echart-'+list[citem].component.name" :component="list[citem].component"
                                               :data="list[citem].data" :option="list[citem].component.option"
                                               :theme="list[citem].component.option.theme" :url="list[citem].url" :child="list[citem].child"
                                               :time="list[citem].time" :home-url="config.url" :data-method="list[citem].dataMethod"
                                               :data-type="list[citem].dataType" :data-query="handleGetQuery(list[citem])"
                                               :click="handleConClick" :formatter="list[citem].formatter"
                                               :click-formatter="list[citem].clickFormatter" :label-formatter="list[citem].labelFormatter"
                                               :data-formatter="list[citem].dataFormatter" :title-formatter="list[citem].titleFormatter">
                                    </component>
                                </div>
                            </avue-echart-slide>
                            <component v-else :ref="'list_'+index" :disabled="!menuFlag" :id="'component_'+index" :scale="stepScale"
                                       :width="item.component.width" :height="item.component.height" :animation="!menuFlag"
                                       :is="'avue-echart-'+item.component.name" :component="item.component" :data="item.data"
                                       :option="item.component.option" :theme="item.component.option.theme" :url="item.url"
                                       :child="item.child" :time="item.time" :home-url="config.url" :data-method="item.dataMethod"
                                       :data-type="item.dataType" :data-query="handleGetQuery(item)" :click="handleConClick"
                                       :formatter="item.formatter" :click-formatter="item.clickFormatter"
                                       :label-formatter="item.labelFormatter" :data-formatter="item.dataFormatter"
                                       :title-formatter="item.titleFormatter">
                            </component>
                        </avue-draggable>
                        </template>

                    </div>
                </div>

            </div>
        </div>

        <div class="menu params" v-show="menuFlag">
            <p class="title">操作</p>
            <el-tabs class="tabs" stretch v-model="tabsActive">
                <el-tab-pane name="0">
                    <el-tooltip slot="label" effect="dark" content="配置" placement="top">
                        <div><i class="iconfont icon-peizhi"></i></div>
                    </el-tooltip>
                    <el-form ref="saveForm" :model="config"  :rules="rules" label-width="120px" label-position="left" size="small">
                        <!-- 组件配置 -->
                        <template v-if="!vaildProp('',[undefined])">
                            <el-form-item label="图层名称">
                                <avue-input v-model="activeObj.name"></avue-input>
                            </el-form-item>
                            <el-form-item label="隐藏">
                                <avue-switch v-model="activeObj.display"></avue-switch>
                            </el-form-item>
                            <template v-if="vaildProp('colorList')">
                                <el-form-item label="系统配色">
                                    <avue-switch v-model="activeOption.switchTheme"></avue-switch>
                                </el-form-item>
                                <el-form-item label="配色选择" v-if="activeOption.switchTheme">
                                    <avue-select v-model="activeOption.theme" :dic="dicOption.themeList">
                                    </avue-select>
                                </el-form-item>
                            </template>
                            <!-- Trend配置 -->
                            <template v-if="activeComponent.prop==='trend'">
                                <el-form label-width="120px" label-position="left" size="small">
                                    <el-form-item label="背景颜色">
                                        <avue-color v-model="activeOption.backgroundColor"></avue-color>
                                    </el-form-item>
                                </el-form>
                            </template>

                            <!-- 迁徙地图配置 -->
                            <template v-if="activeComponent.prop==='coolrd-map'">
                                <el-form label-width="120px" label-position="left" size="small">
                                    <el-form-item label="扩散方向">
                                        <avue-radio v-model="activeOption.geoCoordType" :dic="dicOption.geoCoordType"></avue-radio>
                                    </el-form-item>
                                    <el-form-item label="目标城市">
                                        <el-select v-model="activeOption.coolrdProvince.value" @change="handlegeoCoordProvinceSelect" filterable placeholder="请选择目标城市">
                                            <el-option v-for="item in geoCoordMapOption" :key="item.value" :label="item.label"
                                                       :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </template>

                            <!-- 派件地图配置 -->
                            <template v-if="activeComponent.prop==='virual-map'">
                                <el-form label-width="120px" label-position="left" size="small">
                                    <avue-echart-province v-model="activeOption.selectProvince" :provincelist="dicOption.provinceList"></avue-echart-province>
                                </el-form>
                            </template>

                            <!-- 柱状图配置 -->
                            <template v-if="activeComponent.prop==='bar'">
                                <el-form-item label="竖展示">
                                    <avue-switch type="textarea" v-model="activeOption.category"></avue-switch>
                                </el-form-item>
                                <el-collapse accordion>
                                    <el-collapse-item title="柱体设置">
                                        <el-form-item label="最大宽度">
                                            <avue-slider v-model="activeOption.barWidth" class="right-margin">
                                            </avue-slider>
                                        </el-form-item>
                                        <el-form-item label="圆角">
                                            <avue-slider v-model="activeOption.barRadius" class="right-margin">
                                            </avue-slider>
                                        </el-form-item>
                                        <el-form-item label="最小高度">
                                            <avue-slider v-model="activeOption.barMinHeight" class="right-margin">
                                            </avue-slider>
                                        </el-form-item>
                                        <el-form-item label="链接">
                                            <avue-input type="textarea"  :max-rows="5" v-model="activeOption.link" ></avue-input>
                                        </el-form-item>
                                    </el-collapse-item>
                                </el-collapse>
                            </template>
                            <!-- 折线图配置 -->
                            <template v-if="activeComponent.prop==='line'">
                                <el-form-item label="竖展示">
                                    <avue-switch type="textarea" v-model="activeOption.category"></avue-switch>
                                </el-form-item>
                                <el-collapse accordion>
                                    <el-collapse-item title="折线设置">
                                        <el-form-item label="标记点">
                                            <avue-switch v-model="activeOption.symbol"></avue-switch>
                                        </el-form-item>
                                        <el-form-item label="平滑曲线">
                                            <avue-switch v-model="activeOption.smooth"></avue-switch>
                                        </el-form-item>
                                        <el-form-item label="阶梯线图">
                                            <avue-select v-model="activeOption.step" :dic="dicOption.stepList">
                                            </avue-select>
                                        </el-form-item>
                                        <el-form-item label="面积堆积">
                                            <avue-switch v-model="activeOption.areaStyle"></avue-switch>
                                        </el-form-item>
                                        <el-form-item label="面积堆积透明度">
                                            <el-slider v-model="activeOption.areaStyleOpacity" :max="1" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item label="线条宽度">
                                            <avue-slider v-model="activeOption.lineWidth">
                                            </avue-slider>
                                        </el-form-item>
                                        <el-form-item label="点的大小">
                                            <avue-slider v-model="activeOption.symbolSize">
                                            </avue-slider>
                                        </el-form-item>
                                        <el-form-item label="链接">
                                            <avue-input type="textarea" :max-rows="5" v-model="activeOption.link" ></avue-input>
                                        </el-form-item>
                                    </el-collapse-item>
                                </el-collapse>
                            </template>
                            <!--折柱图配置-->
                            <template v-if="activeComponent.prop==='terminal'">
                                <template v-if="vaildProp('colorList')">
                                    <el-collapse-item title="自定义配色">
                                        <el-form-item label="文字颜色">
                                            <avue-color v-model="activeOption.nameColor">
                                            </avue-color>
                                        </el-form-item>
                                        <el-form-item label="轴线颜色">
                                            <avue-color v-model="activeOption.lineColor"></avue-color>
                                        </el-form-item>
                                        <avue-crud :option="colorOption" :data="activeOption.barColor" @row-save="rowSave"
                                                   @row-del="rowDel" @row-update="rowUpdate"></avue-crud>
                                    </el-collapse-item>
                                </template>
                            </template>
                            <!-- 滑动配置 -->
                            <template v-if="activeComponent.prop==='slide'">
                                <el-form-item label="开启轮播">
                                    <avue-switch v-model="activeOption.autoplay"></avue-switch>
                                </el-form-item>
                                <template v-if="activeOption.autoplay">
                                    <el-form-item label="切换时间">
                                        <avue-input-number v-model="activeOption.delay"></avue-input-number>
                                    </el-form-item>
                                </template>
                                <el-form-item label="子类">
                                    <avue-select multiple v-model="activeObj.child.index" :dic="childList" :props="childProps">
                                    </avue-select>
                                </el-form-item>
                            </template>
                            <!-- 字符云配置 -->
                            <template v-if="activeComponent.prop==='wordcloud'">
                                <el-form-item label="最小字体">
                                    <avue-input-number v-model="activeOption.minFontSize"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="最大字体">
                                    <avue-input-number v-model="activeOption.maxFontSize"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="间距">
                                    <avue-input-number v-model="activeOption.split"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="旋转">
                                    <avue-switch v-model="activeOption.rotate"></avue-switch>
                                </el-form-item>
                            </template>
                            <!-- 象形图配置 -->
                            <template v-if="activeComponent.prop==='pictorialbar'">
                                <el-form-item label="图标">
                                    <img :src="activeOption.symbol" v-if="activeOption.symbol" width="60" />
                                    <avue-input v-model="activeOption.symbol"></avue-input>
                                    <!--<el-input v-model="activeOption.symbol">-->
                                    <!--<div @click="handleOpenImg('activeOption.symbol')" slot="append">-->
                                    <!--<i class="iconfont icon-img"></i>-->
                                    <!--</div>-->
                                    <!--</el-input>-->
                                </el-form-item>
                                <el-form-item label="图标字号">
                                    <avue-input-number v-model="activeOption.symbolSize"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="数值显示">
                                    <avue-switch v-model="activeOption.valueShow">
                                    </avue-switch>
                                </el-form-item>
                                <el-form-item label="字体颜色">
                                    <avue-color v-model="activeOption.color"></avue-color>
                                </el-form-item>
                                <el-form-item label="间距">
                                    <avue-slider v-model="activeOption.split"></avue-slider>
                                </el-form-item>
                                <!--
                                 <el-collapse-item title="X轴设置">
                                     <el-form-item label="显示">
                                         <avue-switch v-model="activeOption.xAxisShow">
                                         </avue-switch>
                                     </el-form-item>
                                     <el-form-item label="字号">
                                         <avue-input-number v-model="activeOption.xNameFontSize">
                                         </avue-input-number>
                                     </el-form-item>
                                 </el-collapse-item>
                                 -->
                                <el-collapse-item title="Y轴设置">
                                    <el-form-item label="显示">
                                        <avue-switch v-model="activeOption.yAxisShow">
                                        </avue-switch>
                                    </el-form-item>
                                    <el-form-item label="字号">
                                        <avue-input-number v-model="activeOption.yNameFontSize">
                                        </avue-input-number>
                                    </el-form-item>
                                    <el-form-item label="轴字体颜色">
                                        <avue-color v-model="activeOption.nameColor"></avue-color>
                                    </el-form-item>
                                </el-collapse-item>
                                <el-form-item label="链接">
                                    <avue-input type="textarea"  :max-rows="1" v-model="activeOption.link"></avue-input>
                                </el-form-item>
                            </template>
                            <!-- 轮播配置 -->
                            <template v-if="activeComponent.prop==='swiper'">
                                <el-form-item label="类型">
                                    <avue-radio v-model="activeOption.type" :dic="dicOption.swiperType"></avue-radio>
                                </el-form-item>
                                <el-form-item label="轮播时间">
                                    <avue-input v-model="activeOption.interval"></avue-input>
                                </el-form-item>
                                <el-form-item label="轮播方向">
                                    <avue-radio v-model="activeOption.direction" :dic="dicOption.directionList">
                                    </avue-radio>
                                </el-form-item>
                                <el-form-item label="选择器">
                                    <avue-radio v-model="activeOption.indicator" :dic="dicOption.swiperIndicator">
                                    </avue-radio>
                                </el-form-item>
                                <!--<el-form-item label="选择器">-->
                                <!--<avue-radio v-model="activeOption.indicatorShow" :dic="dicOption.swiperIndicator">-->
                                <!--</avue-radio>-->
                                <!--</el-form-item>-->
                                <el-form-item label="图片透明度">
                                    <avue-slider v-model="activeOption.opacity"></avue-slider>
                                </el-form-item>
                            </template>

                            <!-- 上下滑动配置 -->
                            <template v-if="activeComponent.prop==='slippage'">
                                <el-form label-width="120px" label-position="left" size="small">
                                    <el-form-item label="上传图片（数组）">
                                        <avue-input type="textarea" :min-rows="15" :max-rows="100" v-model="activeOption.bannData"></avue-input>
                                    </el-form-item>
                                </el-form>
                            </template>

                            <!-- 刻度盘配置 -->
                            <template v-if="activeComponent.prop==='gauge'">
                                <el-form-item label="刻度线粗度(像素)">
                                    <avue-input-number v-model="activeOption.lineSize"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="显示刻度值">
                                    <avue-switch v-model="activeOption.axisLabelShow"></avue-switch>
                                </el-form-item>
                                <el-form-item label="刻度字号">
                                    <avue-input-number v-model="activeOption.axisLabelFontSize"></avue-input-number>
                                </el-form-item>
                                <!--<el-form-item label="指标名称字号">-->
                                <!--<avue-input-number v-model="activeOption.nameFontSize"></avue-input-number>-->
                                <!--</el-form-item>-->
                                <el-form-item label="指标字号">
                                    <avue-input-number v-model="activeOption.valueFontSize"></avue-input-number>
                                </el-form-item>
                            </template>
                            <!-- 文字配置 -->
                            <template v-if="activeComponent.prop==='text'">
                                <el-form-item label="文本内容">
                                    <avue-input v-model="activeObj.data"></avue-input>
                                </el-form-item>
                                <el-form-item label="字体大小">
                                    <avue-input-number v-model="activeOption.fontSize" :max="200"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="字体颜色">
                                    <avue-color v-model="activeOption.color"></avue-color>
                                </el-form-item>
                                <el-form-item label="字体间距">
                                    <avue-slider v-model="activeOption.split"></avue-slider>
                                </el-form-item>
                                <el-form-item label="字体背景">
                                    <avue-color v-model="activeOption.backgroundColor"></avue-color>
                                </el-form-item>
                                <el-form-item label="文字粗细">
                                    <avue-select v-model="activeOption.fontWeight" :dic="dicOption.fontWeight">
                                    </avue-select>
                                </el-form-item>
                                <el-form-item label="对齐方式">
                                    <avue-select v-model="activeOption.textAlign" :dic="dicOption.textAlign">
                                    </avue-select>
                                </el-form-item>
                                <el-collapse accordion>
                                    <el-collapse-item title="跑马灯设置">
                                        <el-form-item label="开启">
                                            <avue-switch v-model="activeOption.scroll"></avue-switch>
                                        </el-form-item>
                                        <template v-if="activeOption.scroll">
                                            <el-form-item label="滚动速度">
                                                <avue-input v-model="activeOption.speed"></avue-input>
                                            </el-form-item>
                                        </template>
                                    </el-collapse-item>
                                    <el-collapse-item title="超链设置">
                                        <el-form-item label="开启">
                                            <avue-switch v-model="activeOption.link"></avue-switch>
                                        </el-form-item>
                                        <template v-if="activeOption.link">
                                            <el-form-item label="打开方式">
                                                <avue-radio v-model="activeOption.linkTarget" :dic="dicOption.target">
                                                </avue-radio>
                                            </el-form-item>
                                            <el-form-item label="超链地址">
                                                <avue-input v-model="activeOption.linkHref"></avue-input>
                                            </el-form-item>
                                        </template>
                                    </el-collapse-item>
                                </el-collapse>
                            </template>
                            <!-- 实时时间配置 -->
                            <template v-else-if="activeComponent.prop==='datetime'">
                                <el-form-item label="时间格式">
                                    <avue-select v-model="activeOption.format" :dic="dicOption.format">
                                    </avue-select>
                                </el-form-item>
                                <el-form-item label="自定义格式">
                                    <avue-input v-model="activeOption.format">
                                    </avue-input>
                                </el-form-item>
                                <el-form-item label="字体间距">
                                    <avue-input-number v-model="activeOption.split" :max="200"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="字体大小">
                                    <avue-input-number v-model="activeOption.fontSize" :max="200"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="字体背景">
                                    <avue-color v-model="activeOption.backgroundColor"></avue-color>
                                </el-form-item>
                                <el-form-item label="对其方式">
                                    <avue-select v-model="activeOption.textAlign" :dic="dicOption.textAlign">
                                    </avue-select>
                                </el-form-item>
                                <el-form-item label="文字粗细">
                                    <avue-select v-model="activeOption.fontWeight" :dic="dicOption.fontWeight">
                                    </avue-select>
                                </el-form-item>
                                <el-form-item label="字体颜色">
                                    <avue-color v-model="activeOption.color"></avue-color>
                                </el-form-item>
                            </template>
                            <!-- 图片配置 -->
                            <template v-else-if="activeComponent.prop==='img'">
                                <el-form-item label="开启旋转">
                                    <avue-switch v-model="activeOption.rotate"></avue-switch>
                                </el-form-item>
                                <el-form-item label="透明度">
                                    <el-slider v-model="activeOption.opacity" :max="1" :step="0.1"></el-slider>
                                </el-form-item>
                                <template v-if="activeOption.rotate">
                                    <el-form-item label="旋转时间">
                                        <avue-input-number v-model="activeOption.duration"></avue-input-number>
                                    </el-form-item>
                                </template>
                                <el-form-item label="缩略图">
                                    <img :src="activeObj.data" alt="" width="100%" />
                                </el-form-item>
                                <el-form-item label="图片地址">
                                    <el-input v-model="activeObj.data">
                                        <div @click="handleOpenImg('activeObj.data')" slot="append">
                                            <i class="iconfont icon-img"></i>
                                        </div>
                                    </el-input>
                                    <el-upload
                                            v-model="activeObj.data"
                                            :action=`${basePath}/uploadOss`
                                            :headers="uploadHeader"
                                            :limit="1"
                                            :on-progress = "uploadProgress"
                                            :on-success="uploadPicImageSuccess"
                                            :before-remove="removePicImage"
                                            :file-list="imgList">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </template>
                            <!-- 图片框配置 -->
                            <template v-else-if="activeComponent.prop==='imgborder'">
                                <el-form-item label="背景色">
                                    <avue-color v-model="activeOption.backgroundColor"></avue-color>
                                </el-form-item>
                                <el-form-item label="缩略图">
                                    <img :src="activeObj.data" alt="" width="100%" />
                                </el-form-item>
                                <el-form-item label="图片地址">
                                    <el-input v-model="activeObj.data">
                                        <div @click="handleOpenImg('activeObj.data')" slot="append">
                                            <i class="iconfont icon-img"></i>
                                        </div>
                                    </el-input>
                                    <el-upload
                                            v-model="activeObj.data"
                                            :action=`${basePath}/uploadOss`
                                            :headers="uploadHeader"
                                            :limit="1"
                                            :show-file-list = true
                                            :on-progress = "uploadProgress"
                                            :on-success="uploadPicImageSuccess"
                                            :before-remove="removePicImage"
                                            :file-list="imgBorderList">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </template>
                            <!-- 进度条配置 -->
                            <template v-else-if="activeComponent.prop==='progress'">
                                <el-form-item label="类型">
                                    <avue-radio v-model="activeOption.type" :dic="dicOption.line">
                                    </avue-radio>
                                </el-form-item>
                                <el-form-item label="间距">
                                    <avue-input-number v-model="activeOption.split" :max="200"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="边框颜色">
                                    <avue-color v-model="activeOption.borderColor"></avue-color>
                                </el-form-item>
                                <el-form-item label="边框大小">
                                    <avue-input-number v-model="activeOption.strokeWidth" :max="50"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="字体大小">
                                    <avue-input-number v-model="activeOption.fontSize" :max="200"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="字体颜色">
                                    <avue-color v-model="activeOption.color"></avue-color>
                                </el-form-item>
                                <el-form-item label="文字粗细">
                                    <avue-select v-model="activeOption.fontWeight" :dic="dicOption.fontWeight">
                                    </avue-select>
                                </el-form-item>
                                <el-form-item label="前缀字体大小">
                                    <avue-input-number v-model="activeOption.suffixFontSize" :max="200"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="前缀字体颜色">
                                    <avue-color v-model="activeOption.suffixColor"></avue-color>
                                </el-form-item>
                                <el-form-item label="前缀文字粗细">
                                    <avue-select v-model="activeOption.suffixFontWeight" :dic="dicOption.fontWeight">
                                    </avue-select>
                                </el-form-item>
                            </template>
                            <!-- 地图配置 -->
                            <template v-else-if="activeComponent.prop==='map'">

                            </template>
                            <!--地理坐标图-->
                            <template v-if="activeComponent.prop==='markMap'">
                            </template>
                            <!-- 选项卡配置 -->
                            <template v-else-if="activeComponent.prop==='tabs'">
                                <el-form-item label="字体大小">
                                    <avue-input-number v-model="activeOption.fontSize" :max="200"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="字体颜色">
                                    <avue-color v-model="activeOption.color"></avue-color>
                                </el-form-item>
                                <el-form-item label="类型">
                                    <avue-radio v-model="activeOption.type" :dic="dicOption.tabsTypeList"></avue-radio>
                                </el-form-item>
                                <template v-if="activeOption.type==='tabs'">
                                    <el-form-item label="字体间距">
                                        <avue-input-number v-model="activeOption.split"></avue-input-number>
                                    </el-form-item>
                                    <el-collapse accordion>
                                        <el-collapse-item title="边框设置">
                                            <el-form-item label="背景颜色">
                                                <avue-color v-model="activeOption.backgroundColor"></avue-color>
                                            </el-form-item>
                                            <!--<el-form-item label="图标间距">-->
                                            <!--<avue-input-number v-model="activeOption.iconSplit"></avue-input-number>-->
                                            <!--</el-form-item>-->
                                            <!--<el-form-item label="图标大小">-->
                                            <!--<avue-input-number v-model="activeOption.iconSize"></avue-input-number>-->
                                            <!--</el-form-item>-->
                                            <el-form-item label="缩略图">
                                                <img :src="activeOption.backgroundImage" alt="" width="70%" />
                                            </el-form-item>
                                            <el-form-item label="背景图片">
                                                <el-input v-model="activeOption.backgroundImage">
                                                    <div @click="handleOpenImg('activeOption.backgroundImage')" slot="append">
                                                        <i class="iconfont icon-img"></i>
                                                    </div>
                                                </el-input>
                                            </el-form-item>
                                            <el-form-item label="边框颜色">
                                                <avue-color v-model="activeOption.borderColor"></avue-color>
                                            </el-form-item>
                                            <el-form-item label="边框宽度">
                                                <avue-input-number v-model="activeOption.borderWidth" :max="10">
                                                </avue-input-number>
                                            </el-form-item>
                                        </el-collapse-item>
                                        <el-collapse-item title="高亮设置">
                                            <el-form-item label="字体高亮颜色">
                                                <avue-color v-model="activeOption.empColor"></avue-color>
                                            </el-form-item>
                                            <el-form-item label="缩略图">
                                                <img :src="activeOption.empBackgroundImage" alt="" width="70%" />
                                            </el-form-item>
                                            <el-form-item label="背景图片">
                                                <el-input v-model="activeOption.empBackgroundImage">
                                                    <div @click="handleOpenImg('activeOption.empBackgroundImage')" slot="append">
                                                        <i class="iconfont icon-img"></i>
                                                    </div>
                                                </el-input>
                                            </el-form-item>
                                            <el-form-item label="背景颜色">
                                                <avue-color v-model="activeOption.empBackgroundColor"></avue-color>
                                            </el-form-item>
                                            <el-form-item label="背景透明度">
                                                <avue-slider v-model="activeOption.empOpacity" :max="100" :step="1">
                                                </avue-slider>
                                            </el-form-item>
                                            <el-form-item label="边框颜色">
                                                <avue-color v-model="activeOption.empBorderColor"></avue-color>
                                            </el-form-item>
                                            <el-form-item label="边框宽度">
                                                <avue-input-number v-model="activeOption.empBorderWidth" :max="10">
                                                </avue-input-number>
                                            </el-form-item>
                                        </el-collapse-item>
                                    </el-collapse>
                                </template>

                            </template>
                            <!-- 翻牌器配置 -->
                            <template v-else-if="activeComponent.prop==='flop'">
                                <el-form-item label="整体">
                                    <avue-switch v-model="activeOption.whole">
                                    </avue-switch>
                                </el-form-item>
                                <el-form-item label="横行">
                                    <avue-switch v-model="activeOption.row">
                                    </avue-switch>
                                </el-form-item>
                                <el-form-item label="精度">
                                    <avue-input-number v-model="activeOption.decimals">
                                    </avue-input-number>
                                </el-form-item>
                                <el-collapse accordion>
                                    <el-collapse-item title="边框设置">
                                        <el-form-item label="边框">
                                            <avue-radio v-model="activeOption.type" :dic="dicOption.border">
                                            </avue-radio>
                                        </el-form-item>
                                        <template v-if="activeOption.type==='border'">
                                            <el-form-item label="边框颜色">
                                                <avue-color v-model="activeOption.borderColor"></avue-color>
                                            </el-form-item>
                                            <el-form-item label="边框宽度">
                                                <avue-input-number v-model="activeOption.borderWidth" :max="10">
                                                </avue-input-number>
                                            </el-form-item>
                                        </template>
                                        <template v-if="activeOption.type==='img'">
                                            <el-form-item label="缩略图">
                                                <img :src="activeOption.backgroundBorder" alt="" width="70%" />
                                            </el-form-item>
                                            <el-form-item label="边框图">
                                                <el-input v-model="activeOption.backgroundBorder">
                                                    <div @click="handleOpenImg('activeOption.backgroundBorder')" slot="append">
                                                        <i class="iconfont icon-img"></i>
                                                    </div>
                                                </el-input>
                                            </el-form-item>
                                        </template>
                                        <el-form-item label="背景颜色">
                                            <avue-color v-model="activeOption.backgroundColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="缩略图">
                                            <img :src="activeOption.backgroundImage" alt="" width="70%" />
                                        </el-form-item>
                                        <el-form-item label="背景图片">
                                            <el-input v-model="activeOption.backgroundImage">
                                                <div @click="handleOpenImg('activeOption.backgroundImage')" slot="append">
                                                    <i class="iconfont icon-img"></i>
                                                </div>
                                            </el-input>
                                        </el-form-item>
                                    </el-collapse-item>
                                    <el-collapse-item title="内部设置">
                                        <el-form-item label="宽度">
                                            <avue-input-number v-model="activeOption.width" :max="1000"></avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="高度">
                                            <avue-input-number v-model="activeOption.height" :max="1000"></avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="间距">
                                            <avue-slider v-model="activeOption.gridY"></avue-slider>
                                        </el-form-item>
                                        <el-form-item label="字体大小">
                                            <avue-input-number v-model="activeOption.fontSize" :max="200"></avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="字体颜色">
                                            <avue-color v-model="activeOption.color"></avue-color>
                                        </el-form-item>
                                        <!--<el-form-item label="字体间距">-->
                                        <!--<avue-input-number v-model="activeOption.split"></avue-input-number>-->
                                        <!--</el-form-item>-->
                                        <el-form-item label="文字粗细">
                                            <avue-select v-model="activeOption.fontWeight" :dic="dicOption.fontWeight">
                                            </avue-select>
                                        </el-form-item>
                                        <el-form-item label="对其方式">
                                            <avue-select v-model="activeOption.justifyContent" :dic="dicOption.position">
                                            </avue-select>
                                        </el-form-item>
                                    </el-collapse-item>
                                    <el-collapse-item title="前缀设置">
                                        <template v-if="!activeOption.whole">
                                            <el-form-item label="前缀内容">
                                                <avue-input v-model="activeOption.prefixText"></avue-input>
                                            </el-form-item>
                                        </template>
                                        <template v-if="!activeOption.row">
                                            <el-form-item label="对其方式">
                                                <avue-select v-model="activeOption.prefixTextAlign" :dic="dicOption.textAlign">
                                                </avue-select>
                                            </el-form-item>
                                        </template>
                                        <el-form-item label="X间距">
                                            <avue-slider v-model="activeOption.prefixSplitx"></avue-slider>
                                        </el-form-item>
                                        <el-form-item label="Y间距">
                                            <avue-slider v-model="activeOption.prefixSplity"></avue-slider>
                                        </el-form-item>
                                        <el-form-item label="颜色">
                                            <avue-color v-model="activeOption.prefixColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="字体大小">
                                            <avue-input-number v-model="activeOption.prefixFontSize" :max="200">
                                            </avue-input-number>
                                        </el-form-item>
                                    </el-collapse-item>
                                    <el-collapse-item title="后缀设置">
                                        <template v-if="!activeOption.whole">
                                            <el-form-item label="后缀内容">
                                                <avue-input v-model="activeOption.suffixText"></avue-input>
                                            </el-form-item>
                                        </template>
                                        <template v-if="!activeOption.row">
                                            <el-form-item label="对其方式">
                                                <avue-select v-model="activeOption.suffixTextAlign" :dic="dicOption.textAlign">
                                                </avue-select>
                                            </el-form-item>
                                        </template>
                                        <el-form-item label="X间距">
                                            <avue-slider v-model="activeOption.suffixSplitx"></avue-slider>
                                        </el-form-item>
                                        <el-form-item label="Y间距">
                                            <avue-slider v-model="activeOption.suffixSplity"></avue-slider>
                                        </el-form-item>
                                        <el-form-item label="颜色">
                                            <avue-color v-model="activeOption.suffixColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="字体大小">
                                            <avue-input-number v-model="activeOption.suffixFontSize" :max="200">
                                            </avue-input-number>
                                        </el-form-item>
                                    </el-collapse-item>
                                </el-collapse>
                            </template>
                            <!-- 表格配置 -->
                            <template v-else-if="activeComponent.prop==='table'">
                                <el-form-item label="字体大小">
                                    <avue-input-number v-model="activeOption.fontSize">
                                    </avue-input-number>
                                </el-form-item>
                                <el-form-item label="行高">
                                    <avue-input-number v-model="activeOption.lineHeight">
                                    </avue-input-number>
                                </el-form-item>
                                <el-form-item label="开启滚动">
                                    <avue-switch v-model="activeOption.scroll">
                                    </avue-switch>
                                </el-form-item>
                                <template v-if="activeOption.scroll">
                                    <el-form-item label="滚动时间">
                                        <avue-input-number v-model="activeOption.scrollTime">
                                        </avue-input-number>
                                    </el-form-item>
                                    <el-form-item label="滚动行数">
                                        <avue-input-number v-model="activeOption.scrollCount">
                                        </avue-input-number>
                                    </el-form-item>
                                </template>
                                <el-form-item label="开启排名">
                                    <avue-switch v-model="activeOption.index"></avue-switch>
                                </el-form-item>
                                <el-form-item label="列显隐">
                                    <avue-switch v-model="activeOption.columnShow">
                                    </avue-switch>
                                </el-form-item>
                                <el-collapse accordion>
                                    <el-collapse-item title="表头设置">
                                        <el-form-item label="表头显隐">
                                            <avue-switch v-model="activeOption.headerShow" :default="true">
                                            </avue-switch>
                                        </el-form-item>
                                        <el-form-item label="表头颜色">
                                            <avue-color type="textarea" v-model="activeOption.headerColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="表头背景">
                                            <avue-color type="textarea" v-model="activeOption.headerBackground"></avue-color>
                                        </el-form-item>
                                        <!--<el-form-item label="字体位置">-->
                                        <!--<avue-select v-model="activeOption.headerTextAlign" :dic="dicOption.textAlign">-->
                                        <!--</avue-select>-->
                                        <!--</el-form-item>-->
                                    </el-collapse-item>
                                </el-collapse>
                                <el-collapse accordion>
                                    <el-collapse-item title="表体设置">
                                        <el-form-item label="文字颜色">
                                            <avue-color type="textarea" v-model="activeOption.bodyColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="表格背景">
                                            <avue-color type="textarea" v-model="activeOption.bodyBackground"></avue-color>
                                        </el-form-item>
                                        <!--<el-form-item label="字体位置">-->
                                        <!--<avue-select v-model="activeOption.bodyTextAlign" :dic="dicOption.textAlign">-->
                                        <!--</avue-select>-->
                                        <!--</el-form-item>-->
                                        <el-form-item label="边框宽度">
                                            <avue-input-number v-model="activeOption.borderWidth">
                                            </avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="边框颜色">
                                            <avue-color type="textarea" v-model="activeOption.borderColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="边框样式">
                                            <avue-select v-model="activeOption.borderStyle" :dic="dicOption.borderStyle">
                                            </avue-select>
                                        </el-form-item>
                                        <el-form-item label="奇行颜色">
                                            <avue-color type="textarea" v-model="activeOption.nthColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="偶行颜色">
                                            <avue-color type="textarea" v-model="activeOption.othColor"></avue-color>
                                        </el-form-item>
                                    </el-collapse-item>
                                </el-collapse>
                                <avue-crud :option="tableOption" :data="activeOption.column" @row-save="rowSave" @row-del="rowDel"
                                           @row-update="rowUpdate"></avue-crud>
                            </template>
                            <!-- 雷达图配置 -->
                            <template v-else-if="activeComponent.prop==='radar'">
                                <el-form-item label="字体大小">
                                    <avue-input-number v-model="activeOption.radarNameSize" :max="200">
                                    </avue-input-number>
                                </el-form-item>
                                <el-form-item label="字体颜色">
                                    <avue-color v-model="activeOption.radarNameColor" :max="200">
                                    </avue-color>
                                </el-form-item>
                                <!--暂未配置区域透明度-->
                                <!--<el-form-item label="区域透明度">-->
                                <!--<avue-slider v-model="activeOption.areaOpacity" :max="1" :step="0.1">-->
                                <!--</avue-slider>-->
                                <!--</el-form-item>-->
                            </template>
                            <!-- 散点图配置 -->
                            <template v-else-if="activeComponent.prop==='scatter'">
                                <el-form-item label="气泡大小">
                                    <avue-input-number v-model="activeOption.symbolSize">
                                    </avue-input-number>
                                </el-form-item>
                                <el-form-item label="字体位置">
                                    <avue-select v-model="activeOption.scatterLabelPosition" :dic="dicOption.scatterLabelPosition">
                                    </avue-select>
                                </el-form-item>
                                <el-form-item label="内容格式化">
                                    <avue-input v-model="activeOption.labelFormatter">
                                    </avue-input>
                                </el-form-item>
                                <el-form-item label="链接">
                                    <avue-input type="textarea"  :max-rows="5" v-model="activeOption.link" ></avue-input>
                                </el-form-item>
                            </template>
                            <!-- 漏斗图配置 -->
                            <template v-else-if="activeComponent.prop==='funnel'">

                            </template>
                            <!-- 饼图的配置 -->
                            <template v-else-if="activeComponent.prop==='pie'">
                                <el-collapse accordion>
                                    <el-collapse-item title="饼图设置">
                                        <el-form-item label="设置为环形">
                                            <avue-switch v-model="activeOption.isRadius"></avue-switch>
                                        </el-form-item>
                                        <el-form-item label="半径大小" v-if="activeOption.isRadius">
                                            <avue-input v-model="activeOption.radius"></avue-input>>
                                        </el-form-item>
                                        <el-form-item label="南丁格尔玫瑰">
                                            <avue-switch v-model="activeOption.roseType"></avue-switch>
                                        </el-form-item>
                                        <el-form-item label="自动排序">
                                            <avue-switch v-model="activeOption.sort"></avue-switch>
                                        </el-form-item>
                                        <el-form-item label="不展示零">
                                            <avue-switch v-model="activeOption.notCount"></avue-switch>
                                        </el-form-item>
                                        <el-form-item label="链接">
                                            <avue-input type="textarea" :max-rows="5" v-model="activeOption.link" ></avue-input>
                                        </el-form-item>
                                        <el-form-item label="标签位置">
                                            <avue-select v-model="activeOption.pieLabelPosition" :dic="dicOption.pieLabelPosition">
                                            </avue-select>
                                        </el-form-item>
                                    </el-collapse-item>
                                </el-collapse>
                            </template>
                            <!-- 折叠公共配置 -->
                            <el-collapse accordion>
                                <!-- 标题设置 -->
                                <template v-if="vaildProp('titleList')">
                                    <el-collapse-item title="标题设置">
                                        <el-form-item label="标题显示">
                                            <avue-switch v-model="activeOption.titleShow"></avue-switch>
                                        </el-form-item>
                                        <el-form-item label="标题">
                                            <avue-input v-model="activeOption.title"></avue-input>
                                        </el-form-item>
                                        <el-form-item label="字体颜色">
                                            <avue-color v-model="activeOption.titleColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="字体大小">
                                            <avue-input-number v-model="activeOption.titleFontSize"></avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="字体位置">
                                            <avue-select v-model="activeOption.titlePostion" :dic="dicOption.textAlign">
                                            </avue-select>
                                        </el-form-item>
                                        <el-form-item label="副标题">
                                            <avue-input v-model="activeOption.subtext" ></avue-input>
                                        </el-form-item>
                                        <el-form-item label="字体颜色">
                                            <avue-color v-model="activeOption.subTitleColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="字体大小">
                                            <avue-input-number v-model="activeOption.subTitleFontSize">
                                            </avue-input-number>
                                        </el-form-item>
                                    </el-collapse-item>
                                </template>
                                <!-- 轴设置 -->
                                <template v-if="vaildProp('barList')">
                                    <el-collapse-item title="X轴设置">
                                        <el-form-item label="名称">
                                            <avue-input v-model="activeOption.xAxisName">
                                            </avue-input>
                                        </el-form-item>
                                        <el-form-item label="显示">
                                            <avue-switch v-model="activeOption.xAxisShow">
                                            </avue-switch>
                                        </el-form-item>
                                        <el-form-item label="显示网格线">
                                            <avue-switch v-model="activeOption.xAxisSplitLineShow">
                                            </avue-switch>
                                        </el-form-item>
                                        <el-form-item label="标签间距">
                                            <avue-switch v-model="activeOption.xAxisinterval">
                                            </avue-switch>
                                        </el-form-item>
                                        <el-form-item label="文字角度">
                                            <avue-slider v-model="activeOption.xAxisRotate" class="right-margin">
                                            </avue-slider>
                                        </el-form-item>
                                        <el-form-item label="轴反转">
                                            <avue-switch v-model="activeOption.xAxisInverse">
                                            </avue-switch>
                                        </el-form-item>
                                        <el-form-item label="字号">
                                            <avue-input-number v-model="activeOption.xNameFontSize">
                                            </avue-input-number>
                                        </el-form-item>
                                    </el-collapse-item>
                                    <el-collapse-item title="Y轴设置">
                                        <el-form-item label="名称">
                                            <avue-input v-model="activeOption.yAxisName">
                                            </avue-input>
                                        </el-form-item>
                                        <template v-if="activeComponent.prop==='terminal'">
                                            <el-form-item label="右轴名称">
                                                <avue-input v-model="activeOption.yAxisName2">
                                                </avue-input>
                                            </el-form-item>
                                        </template>
                                        <el-form-item label="显示">
                                            <avue-switch v-model="activeOption.yAxisShow">
                                            </avue-switch>
                                        </el-form-item>
                                        <el-form-item label="轴网格线">
                                            <avue-switch v-model="activeOption.yAxisSplitLineShow">
                                            </avue-switch>
                                        </el-form-item>
                                        <el-form-item label="反转">
                                            <avue-switch v-model="activeOption.yAxisInverse">
                                            </avue-switch>
                                        </el-form-item>
                                        <el-form-item label="字号">
                                            <avue-input-number v-model="activeOption.yNameFontSize">
                                            </avue-input-number>
                                        </el-form-item>
                                    </el-collapse-item>
                                </template>
                                <!-- 数值设置 -->
                                <template v-if="vaildProp('labelList')">
                                    <el-collapse-item title="字体设置">
                                        <el-form-item label="显示">
                                            <avue-switch v-model="activeOption.labelShow">
                                            </avue-switch>
                                        </el-form-item>
                                        <el-form-item label="字体大小">
                                            <avue-input-number v-model="activeOption.labelShowFontSize">
                                            </avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="字体颜色">
                                            <avue-color v-model="activeOption.labelShowColor">
                                            </avue-color>
                                        </el-form-item>
                                        <el-form-item label="字体粗细">
                                            <avue-select v-model="activeOption.labelShowFontWeight" :dic="dicOption.fontWeight">
                                            </avue-select>
                                        </el-form-item>
                                    </el-collapse-item>
                                </template>
                                <!-- 提示语设置  -->
                                <template v-if="vaildProp('tipList')">
                                    <el-collapse-item title="提示语设置">
                                        <el-form-item label="字体大小">
                                            <avue-input-number v-model="activeOption.tipFontSize"></avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="字体颜色">
                                            <avue-color v-model="activeOption.tipColor"></avue-color>
                                        </el-form-item>
                                    </el-collapse-item>
                                </template>
                                <!-- 轴距离设置 -->
                                <template v-if="vaildProp('postionList')">
                                    <el-collapse-item title="坐标轴边距设置">
                                        <el-form-item label="左边距(像素)">
                                            <avue-slider v-model="activeOption.gridX" :max="400"></avue-slider>
                                        </el-form-item>
                                        <el-form-item label="顶边距(像素)">
                                            <avue-slider v-model="activeOption.gridY||70" :max="400"></avue-slider>
                                        </el-form-item>
                                        <el-form-item label="右边距(像素)">
                                            <avue-slider v-model="activeOption.gridX2" :max="400"></avue-slider>
                                        </el-form-item>
                                        <el-form-item label="底边距(像素)">
                                            <avue-slider v-model="activeOption.gridY2" :max="400"></avue-slider>
                                        </el-form-item>
                                    </el-collapse-item>
                                </template>
                                <!-- 图例设置 -->
                                <template v-if="vaildProp('legendList')">
                                    <el-collapse-item title="图例操作">
                                        <el-form-item label="图例">
                                            <avue-switch v-model="activeOption.legend"></avue-switch>
                                        </el-form-item>
                                        </avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="图例宽度">
                                            <avue-input-number v-model="activeOption.itemWidth">
                                            </avue-input-number>
                                        </el-form-item>
                                        <!--<el-form-item label="位置">-->
                                        <!--<avue-select v-model="activeOption.legendPostion" :dic="dicOption.textAlign">-->
                                        <!--</avue-select>-->
                                        <!--</el-form-item>-->
                                        <el-form-item label="横向位置">
                                            <avue-select v-model="activeOption.legendPostion" :dic="dicOption.textAlign">
                                            </avue-select>
                                        </el-form-item>
                                        <el-form-item label="纵向位置">
                                            <avue-select v-model="activeOption.legendTop" :dic="dicOption.topList">
                                            </avue-select>
                                        </el-form-item>
                                        <el-form-item label="布局朝向">
                                            <avue-select v-model="activeOption.legendOrient" :dic="dicOption.orientList">
                                            </avue-select>
                                        </el-form-item>
                                        <el-form-item label="字体大小">
                                            <avue-input-number v-model="activeOption.legendFontSize">
                                            </avue-input-number>
                                        </el-form-item>
                                    </el-collapse-item>
                                </template>
                                <!-- 颜色设置 -->
                                <template v-if="vaildProp('colorList')">
                                    <el-collapse-item title="自定义配色">
                                        <el-form-item label="文字颜色">
                                            <avue-color v-model="activeOption.nameColor">
                                            </avue-color>
                                        </el-form-item>
                                        <el-form-item label="轴线颜色">
                                            <avue-color v-model="activeOption.lineColor"></avue-color>
                                        </el-form-item>
                                        <avue-crud :option="colorOption" :data="activeOption.barColor" @row-save="rowSave"
                                                   @row-del="rowDel" @row-update="rowUpdate"></avue-crud>
                                    </el-collapse-item>
                                </template>
                                <template v-if="vaildProp('mapList')">
                                    <el-form-item label="开启轮播">
                                        <avue-switch v-model="activeOption.banner"></avue-switch>
                                    </el-form-item>
                                    <template v-if="activeOption.banner">
                                        <el-form-item label="轮播时间">
                                            <avue-input v-model="activeOption.bannerTime"></avue-input>
                                        </el-form-item>
                                    </template>
                                    <template v-if="activeOption.type===0">
                                        <avue-echart-province v-model="activeOption.mapSelect" :provincelist="dicOption.provinceList"></avue-echart-province>
                                        <el-form-item label="地图比例">
                                            <avue-slider v-model="activeOption.zoom" :max="5" :step="0.1"></avue-slider>
                                        </el-form-item>
                                        <el-form-item label="字体大小">
                                            <avue-input-number v-model="activeOption.fontSize"></avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="字体高亮颜色">
                                            <avue-color v-model="activeOption.empColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="字体颜色">
                                            <avue-color v-model="activeOption.color"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="区域线">
                                            <avue-input-number v-model="activeOption.borderWidth"></avue-input-number>
                                        </el-form-item>
                                        <el-form-item label="区域颜色">
                                            <avue-color v-model="activeOption.areaColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="区域高亮颜色">
                                            <avue-color v-model="activeOption.empAreaColor"></avue-color>
                                        </el-form-item>
                                        <el-form-item label="边框颜色">
                                            <avue-color v-model="activeOption.borderColor"></avue-color>
                                        </el-form-item>
                                    </template>
                                    <template v-if="activeOption.type===1">
                                        <el-form-item label="图片地址">
                                            <avue-input v-model="activeOption.img"></avue-input>
                                        </el-form-item>
                                        <el-form-item label="地图比例">
                                            <avue-slider v-model="activeOption.scale" :max="300"></avue-slider>
                                        </el-form-item>
                                    </template>
                                </template>
                            </el-collapse>
                        </template>
                        <!-- 多选配置选项 -->
                        <template v-else-if="isSelect">
                            <el-form-item label="水平方式">
                                <el-tooltip content="左对齐" placement="top">
                                    <i class="el-icon-s-fold icon" @click="handlePostionSelect('left')"></i>
                                </el-tooltip>
                                <el-tooltip content="居中对齐" placement="top">
                                    <i class="el-icon-s-operation icon" @click="handlePostionSelect('center')"></i>
                                </el-tooltip>
                                <el-tooltip content="右对齐" placement="top">
                                    <i class="el-icon-s-unfold icon" @click="handlePostionSelect('right')"></i>
                                </el-tooltip>
                            </el-form-item>
                            <el-form-item label="垂直方式">
                                <el-tooltip content="顶对齐" placement="top">
                                    <i class="el-icon-s-fold icon" @click="handlePostionSelect('top')"></i>
                                </el-tooltip>
                                <el-tooltip content="中部对齐" placement="top">
                                    <i class="el-icon-s-operation icon" @click="handlePostionSelect('middle')"></i>
                                </el-tooltip>
                                <el-tooltip content="底对齐" placement="top">
                                    <i class="el-icon-s-unfold icon" @click="handlePostionSelect('bottom')"></i>
                                </el-tooltip>
                            </el-form-item>
                            <el-form-item label-width="0">
                                <el-button type="primary" size="small" class="block" @click="handleDeleteSelect">批量删除</el-button>
                            </el-form-item>
                            <el-form-item label-width="0">
                                <el-button type="danger" size="small" class="block" @click="handleExectSelect">退出全选</el-button>
                            </el-form-item>
                        </template>
                        <!-- 主屏的配置项 -->
                        <template v-else>
                            <el-form-item label="大屏名称" prop="name">
                                <avue-input v-model="config.name"></avue-input>
                            </el-form-item>
                            <el-form-item label="大屏简介">
                                <avue-input v-model="config.info" type="textarea" :min-rows="5"></avue-input>
                            </el-form-item>
                            <el-tooltip content="大屏设置保护密码，可以防止被人随意修改" placement="bottom" effect="light">
                                <el-form-item label="保护密码">
                                    <!-- auto-complete="new-password"取消浏览器记住密码问题  -->
                                    <el-input auto-complete="new-password" maxlength="4" type="password"  show-word-limit v-model="config.protectionCode"></el-input>
                                </el-form-item>
                            </el-tooltip>
                            <el-form-item label="大屏宽度">
                                <avue-input-number v-model="config.width"></avue-input-number>
                            </el-form-item>
                            <el-form-item label="大屏高度">
                                <avue-input-number v-model="config.height"></avue-input-number>
                            </el-form-item>
                            <el-form-item label="背景颜色">
                                <avue-color v-model="config.backgroundColor"></avue-color>
                            </el-form-item>
                            <el-form-item label="缩略图">
                                <el-upload
                                        v-model="config.thumbnail"
                                        :action=`${basePath}/uploadOss`
                                        :headers="uploadHeader"
                                        :limit="1"
                                        :on-progress = "uploadProgress"
                                        :on-success="uploadSuccess"
                                        :before-remove="removeFile"
                                        list-type="picture"
                                        :file-list="fileList">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="背景图">
                                <img :src="imgPath" alt="" width="70%" />
                            </el-form-item>
                            <el-form-item label="背景图片">
                                <el-input v-model="config.backgroundImage">
                                    <div @click="handleOpenImg('config.backgroundImage')" slot="append">
                                        <i class="iconfont icon-img"></i>
                                    </div>
                                </el-input>
                                <el-upload
                                        :action=`${basePath}/uploadOss`
                                        :headers="uploadHeader"
                                        :limit="1"
                                        :on-progress = "uploadProgress"
                                        :on-success="uploadBackgroundImageSuccess"
                                        :before-remove="removeBackgroundImage"
                                        :file-list="backgroundList">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="缩放">
                                <el-slider v-model="config.scale" :max="200" :format-tooltip="formatTooltip"></el-slider>
                            </el-form-item>
                            <el-form-item label="环境地址">
                                <avue-input type="textarea" :min-rows="5" v-model="config.url"></avue-input>
                            </el-form-item>
                            <el-form-item label="参数">
                                <avue-input type="textarea" :min-rows="5" v-model="queryData"></avue-input>
                            </el-form-item>
                            <el-form-item label="水印(预览模式有效)">
                                <avue-switch v-model="config.mark.show"></avue-switch>
                            </el-form-item>
                            <template v-if="config.mark.show">
                                <el-form-item label="内容">
                                    <avue-input v-model="config.mark.text"></avue-input>
                                </el-form-item>
                                <el-form-item label="大小">
                                    <avue-input-number v-model="config.mark.fontSize"></avue-input-number>
                                </el-form-item>
                                <el-form-item label="颜色">
                                    <avue-color v-model="config.mark.textStyle"></avue-color>
                                </el-form-item>
                                <el-form-item label="角度">
                                    <avue-input-number v-model="config.mark.degree"></avue-input-number>
                                </el-form-item>
                            </template>
                        </template>
                    </el-form>
                </el-tab-pane>
                <!-- 数据配置 -->
                <el-tab-pane name="1" v-if="vaildProp('dataList')">
                    <el-tooltip slot="label" effect="dark" content="数据" placement="top">
                        <div><i class="iconfont icon-peizhi"></i></div>
                    </el-tooltip>
                    <el-form label-width="120px" label-position="left" size="small">
                        <el-form-item label="数据类型">
                            <avue-radio v-model="activeObj.dataType" :dic="dicOption.dataType"></avue-radio>
                        </el-form-item>
                        <el-form-item label="数据值" v-if="activeObj.dataType===0">
                            <avue-input type="textarea" v-model="jsonData" :min-rows="15"></avue-input>
                        </el-form-item>
                        <template v-if="activeObj.dataType===1">
                            <el-form-item label="接口地址">
                                <avue-input type="textarea" :min-rows="6" v-model="activeObj.url"></avue-input>
                            </el-form-item>
                            <el-form-item label="接口方式" v-if="activeObj.dataType===1">
                                <avue-radio v-model="activeObj.dataMethod" :dic="dicOption.dataMethod"></avue-radio>
                            </el-form-item>
                            <el-form-item label="刷新时间">
                                <avue-input-number v-model="activeObj.time"></avue-input-number>
                            </el-form-item>
                        </template>
                        <el-form-item label="数据处理">
                            <avue-input type="textarea" :min-rows="15" v-model="activeObj.dataFormatter"></avue-input>
                        </el-form-item>
                        <el-form-item label-width="0">
                            <el-button type="primary" size="small" class="block" @click="handleRefresh">刷新数据</el-button>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>
                <!-- 交互事件配置 -->
                <el-tab-pane name="2" v-if="vaildProp('eventList')">
                    <el-tooltip slot="label" effect="dark" content="交互" placement="top">
                        <div><i class="iconfont icon-peizhi"></i></div>
                    </el-tooltip>
                    <el-form label-width="120px" label-position="left" size="small">
                        <el-form-item label="子类">
                            <avue-select multiple v-model="activeObj.child.index" :dic="childList" :props="childProps">
                            </avue-select>
                        </el-form-item>
                        <el-form-item label="参数">
                            <avue-input v-model="activeObj.child.paramName"></avue-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <!-- 其他事件配置 -->
                <el-tab-pane name="3" v-if="vaildProp('formatterList')">
                    <el-tooltip slot="label" effect="dark" content="格式化" placement="top">
                        <div><i class="iconfont icon-peizhi"></i></div>
                    </el-tooltip>
                    <el-form label-width="120px" label-position="left" size="small">
                        <el-form-item label="提示事件">
                            <avue-input type="textarea" :min-rows="15" v-model="activeObj.formatter"></avue-input>
                        </el-form-item>
                        <el-form-item label="点击事件" v-if="vaildProp('clickFormatterList')">
                            <avue-input type="textarea" :min-rows="15" v-model="activeObj.clickFormatter"></avue-input>
                        </el-form-item>
                        <el-form-item label="标题事件" v-if="vaildProp('labelFormatterList')">
                            <avue-input type="textarea" :min-rows="15" v-model="activeObj.labelFormatter"></avue-input>
                        </el-form-item>
                        <el-button type="primary" size="small" class="block" @click="handleFormatter">刷新函数</el-button>
                    </el-form>
                </el-tab-pane>
                <!-- 基本参数配置 -->
                <el-tab-pane name="4" v-if="isActive">
                    <el-tooltip slot="label" effect="dark" content="参数" placement="top">
                        <div><i class="iconfont icon-peizhi"></i></div>
                    </el-tooltip>
                    <el-form label-width="120px" label-position="left" size="small">
                        <el-form-item label="序号">
                            <avue-input v-model="active"></avue-input>
                        </el-form-item>
                        <el-form-item label="宽度">
                            <avue-input v-model="activeComponent.width"></avue-input>
                        </el-form-item>
                        <el-form-item label="高度">
                            <avue-input v-model="activeComponent.height"></avue-input>
                        </el-form-item>
                        <el-form-item label="X位置">
                            <avue-input v-model="activeObj.left"></avue-input>
                        </el-form-item>
                        <el-form-item label="Y位置">
                            <avue-input v-model="activeObj.top"></avue-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</div>
</body>
<script>
    //全局注册echarts
    Vue.prototype.$echarts = echarts;
    const calcWidth = 180 + 345;
    new Vue({
        el: '#app',
        data() {
            return {
                uploadHeader: {
                    "X-Access-Token": ""
                },
                picture: null, //图片组件地址
                uploadLoading: null, //文件上传
                backgroundList: [], //背景图片列表
                imgList: [], //图片列表,
                imgBorderList: [], //图片框列表
                token: null,// token
                rules: {
                    name: [
                        {required: true, message: '请输入大屏名称', trigger: 'blur'},
                    ]
                },
                highline: false,
                geoCoordMapOption: geoCoordMapOption,//全国物流城市
                selectProvince: 0,//当前地图省份
                fileList: [],
                text: ``,
                id: "",
                type: "0",//模版类型
                basePath,
                url: reportUrl,
                childProps: {
                    label: 'name',
                    value: 'index'
                },
                contentWidth: 0,
                contentMenu: false,
                contentMenuX: -1000,
                contentMenuY: -1000,
                zIndex: 0,
                key: '',
                scale: '',
                baseList: baseList,
                menuFlag: true,
                dataVisible: false,
                imgVisible: false,
                imgObj: {},
                imgOption: imgOption,
                imgTabs: imgTabs,
                imgActive: 0,
                CodeMirrorEditor: {},
                gradeFlag: false,
                form: {},
                dicOption: dicOption,
                tableOption: tableOption,
                colorOption: colorOption,
                config: config,
                active: -1,
                tabsActive: 0,
                list: list,
                selectList: [],
                selectCount: {
                    maxx1: 0,
                    maxx2: 0,
                    maxy1: 0,
                    maxy2: 0,
                    x1: 0,
                    x2: 0,
                    y1: 0,
                    y2: 0
                },
                moveObj: {
                    startX: 0,
                    startY: 0,
                    show: false,
                },
                selectObj: {
                    startX: 0,
                    startY: 0,
                    moveX: 0,
                    moveY: 0,
                    flag: false,
                    show: false,
                    left: 0,
                    top: 0,
                    width: 0,
                    height: 0
                }
            }
        },
        computed: {
            imgPath() {
                return this.getImgPath();
            },
            selectStyle() {
                return {
                    width: this.setPx(this.selectObj.width),
                    height: this.setPx(this.selectObj.height),
                    left: this.setPx(this.selectObj.left),
                    top: this.setPx(this.selectObj.top)
                }
            },
            isSelect() {
                return !this.validatenull(this.selectList)
            },
            isActive() {
                return this.active != -1
            },
            childList() {
                return this.list.filter(ele => {
                    if (['tabs', 'slide'].includes(ele.component.prop)) {
                        return false;
                    }
                    return true;
                })
            },
            listJson() {
                let list = this.list.filter(ele => !ele.destruction == true)
                const str = stringify(list)
                return str
            },
            stepScale() {
                let scale = Number(((1 / this.scale) * 100).toFixed(2));
                return scale
            },
            queryData: {
                get() {
                    const data = this.config.query;
                    if (this.isJson(data)) {
                        return JSON.stringify(data, null, 4);
                    }
                    return '';
                },
                set(val) {
                    let data;
                    try {
                        data = JSON.parse(val, null, 4);
                        this.config.query = data
                    } catch (error) {
                        this.$message.error('json格式错误，检查控制台')
                        this.$Log.danger(error)
                    }

                },
            },
            jsonData: {
                get() {
                    const data = this.activeObj.data
                    if (this.isJson(data)) {
                        return JSON.stringify(data, null, 4);
                    }
                    return '';
                },
                set(val) {
                    let data;
                    try {
                        data = JSON.parse(val, null, 4);
                        this.activeObj.data = data
                    } catch (error) {
                        this.$message.error('json格式错误，检查控制台')
                        this.$Log.danger(error)
                    }

                },
            },
            styleContentmenu() {
                return {
                    left: this.setPx(this.contentMenuX),
                    top: this.setPx(this.contentMenuY)
                }
            },
            zIndexList: {
                set(val) {
                    const leng = val.length;
                    val.forEach((ele, index) => {
                        const zIndex = leng - index;
                        this.$set(this.list[ele.index], 'zIndex', zIndex)
                    })
                },
                get() {
                    let list = [];
                    list = this.list.map(ele => {
                        return {
                            destruction: ele.destruction,
                            index: ele.index,
                            title: ele.name,
                            zIndex: ele.zIndex,
                            icon: ele.icon
                        }
                    })
                    list.sort(compare("zIndex"));
                    return list;
                }
            },
            listLen() {
                return this.list.length || 0;
            },
            activeComponent() {
                return this.activeObj.component || {}
            },
            activeOption() {
                return this.activeComponent.option || {}
            },
            activeKey() {
                if (this.activeComponent.name === 'table') {
                    return this.activeOption.column
                } else if (dicOption.colorList.includes(this.activeComponent.name)) {
                    return this.activeOption.barColor
                }
            },
            activeObj() {
                return this.list[this.active] || {}
            },
            activeNextObj() {
                return this.list[this.active - 1] || {}
            },
            activeBreakObj() {
                return this.list[this.active + 1] || {}
            },
            styleName() {
                const scale = this.config.scale;
                return Object.assign({
                    transform: "scale(".concat(scale / 100, ", ").concat(scale / 100, ")"),
                    width: this.setPx(this.config.width),
                    height: this.setPx(this.config.height),
                    backgroundColor: this.config.backgroundColor
                }, (() => {
                    if (this.config.backgroundImage) {
                        return {
                            background: "url(" + this.getImgPath() + ") 0% 0% / 100% 100% rgb(3, 12, 59)",
                        }
                    }
                    return
                })())
            },
            gradeLenStyle() {
                console.log("=====");
                return {
                    backgroundSize: "" + this.setPx(this.config.gradeLen) + " " + this.setPx(this.config.gradeLen) + "," + this.setPx(this.config.gradeLen) + " " + this.setPx(this.config.gradeLen) + ""
                }
            }
        },
        mounted() {

            //加入token
            this.token = getQueryString("token");
            this.uploadHeader["X-Access-Token"] = this.token;
            if (!this.token) {
                //window.location.href = "./403/index2.html";
            }
            window.addEventListener('keydown', this.handleKeyboardDel)
            window.addEventListener('keyup', this.handleKeyboardEvent)
            this.type = getQueryString("type")
            let id = getQueryString('id');

            if (!id) {
                this.contentWidth = this.$refs.content.offsetWidth;
                this.setScale();
                this.setResize();
                return;
            }
            this.id = id;
            const loading = this.$loading({
                lock: true,
                text: '正在加载中，请稍后',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            getReportData(this.url.queryById + "?id=" + id, (report) => {

            this.list = report.desScreenItemJson;
            this.config = report.desScreenMainJson;
            //校验保护码
            if (this.config.protectionCode) {
                //validateProtectionCode(this.config.protectionCode);
            }
            this.config.thumbnail = report.thumbnail;
            let url = this.config.thumbnail;
            if (url && !url.startsWith("http")) {
                url = base + report.thumbnail;
            }
            if (report.thumbnail) {
                this.fileList.push({
                    name: report.thumbnail,
                    url: url
                })
            }
            loading.close();
            this.contentWidth = this.$refs.content.offsetWidth;

            this.setScale();
            this.setResize();
             });

        },
        watch: {
            "config.mark.show"(newValue) {   //水印显示隐藏
                if (newValue === undefined) {
                    return;
                }
                if (newValue) {
                    let mark = this.deepClone(this.config.mark);
                    if (mark.fontSize) {
                        mark.font = this.setPx(mark.fontSize) + " 黑体";
                    }
                    this.watermark = Vue.prototype.watermark(mark);
                } else {
                    this.watermark && this.watermark.Remove()
                }
            },
            "activeObj.top"() {
                this.handleAlign()
            },
            "activeObj.left"() {
                this.handleAlign()
            },
            "activeOption.mapSelect"(newValue) {
                if (newValue != undefined && newValue != '') {
                    this.registerMap(newValue, "map");
                }

            },
            'config.width'() {
                this.setResize('width');
            },
            'config.height'() {
                this.setResize('height');
            },
            'config.scale'() {
                this.setResize();
            },
            menuFlag(val) {
                this.setResize();
            },
            active(val) {
                this.list.forEach((ele, index) => {
                    this.$refs['item_' + index][0].setActive(index == val)
                });
                this.$nextTick(() => {
                    this.selectObj.flag = false;
                    this.contentMenu = false;
                })
                this.tabsActive = '0';
            },
        },
        methods: {
            activeClick(index) {
                //选择图层时清除表单校验
                this.active = index
                this.clearValidate();
            },
            clearValidate() {
                this.$refs.saveForm.clearValidate();
            },
            getImgPath() {
                let backgroundImage = this.config.backgroundImage;
                if (backgroundImage) {
                    if (!backgroundImage.startsWith("http")) {
                        return basePath + backgroundImage;
                    }
                }
                return backgroundImage;
            },
            handlegeoCoordProvinceSelect(value) {
                this.activeOption.coolrdProvince = this.geoCoordMapOption[value];
            },
            removeFile(file, fileList) {
                this.config.thumbnail = "";
            },
            uploadSuccess(response, file, fileList) {
                this.config.thumbnail = response.message;
                this.uploadLoading && this.uploadLoading.close();
                this.uploadLoading = null;
            },
            uploadProgress(event, file, fileList) {
                this.uploadLoading = this.$loading({
                    lock: true,
                    text: '正在上传中，请稍后',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            uploadBackgroundImageSuccess(response, file, fileList) {
                //背景图片上传回调
                this.config.backgroundImage = response.message;
                this.uploadLoading && this.uploadLoading.close();
                this.uploadLoading = null;
            },
            removeBackgroundImage(file, fileList) {
                //移出背景图片
                this.config.backgroundImage = "";
            },
            uploadPicImageSuccess(response, file, fileList) {
                //图片上传回调
                this.activeObj.data = response.message;
                this.uploadLoading && this.uploadLoading.close();
                this.uploadLoading = null;
            },
            removePicImage(file, fileList) {
                //移出图片
                this.activeObj.data = "";
            },
            handleBack() {
                self.location = `./index.html?token=${this.token}`;
            },
            handleSave() {
                if (!this.config.name) {
                    this.$message({
                        offset: 200,
                        duration: 2000,
                        showClose: true,
                        message: '请输入大屏名称',
                        type: 'error'
                    });
                }
                this.$refs.saveForm.validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    if (this.list.length < 1) {
                        this.$message({
                            offset: 200,
                            duration: 2000,
                            showClose: true,
                            message: '请添加组件',
                            type: 'error'
                        });
                        return false;
                    }

                    const loading = this.$loading({
                        lock: true,
                        text: '正在保存中，请稍后',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    let params = getUrlParams(window.location.href);

                    let jreReport = {};
                    let nowTime = new Date().getTime();
                    jreReport.id = this.id;
                    jreReport.status = "0";
                    jreReport.type = this.type;
                    jreReport.screenName = this.config.name;
                    jreReport.screenDescribe = this.config.info;
                    jreReport.imageUrl = this.config.backgroundImage;
                    jreReport.desScreenMainJson = stringify(this.config);
                    jreReport.desScreenItemJson = this.listJson;
                    jreReport.query = Object.assign((this.config.query || {}), params);
                    jreReport.thumbnail = this.config.thumbnail;
                    jreReport.updateTime = nowTime;
                    //保护码
                    jreReport.protectionCode = this.config.protectionCode;
                    //加入创建时间字段
                    if (!this.id) {
                        jreReport.createTime = nowTime;
                    }
                    //删除标识0-正常,1-已删除
                    jreReport.delFlag = 0;

                    axios.post(this.url.add, jreReport, {
                        headers: {
                            "X-Access-Token": this.token
                        }
                    }).then(res => {
                        if (!res.data.success) {
                            this.$message({
                                offset: 200,
                                duration: 700,
                                showClose: true,
                                message: res.data.message,
                                type: 'error'
                            });
                            loading.close();
                            return;
                        }
                        this.id = res.data.result.id;
                        loading.close();
                        this.$message({
                            offset: 200,
                            duration: 700,
                            showClose: true,
                            message: '保存成功',
                            type: 'success'
                        });


                    }).catch(err => {
                        this.$message({
                            offset: 200,
                            duration: 2000,
                            showClose: true,
                            message: '保存失败',
                            type: 'error'
                        });
                    })
                });


            },
            vaildProp(name, list) {
                if (list) {
                    return list.includes(this.activeComponent.prop)
                }
                return this.dicOption[name].includes(this.activeComponent.prop)
            },
            handleMoveMouseUp(e) {
                this.moveObj.show = false;
            },
            handleMoveMouseDown(e) {
                const x = e.offsetX
                const y = e.offsetY
                this.moveObj.startX = x
                this.moveObj.startY = y
                this.moveObj.show = true;
                this.handleAlign()
            },
            handleMoveMouseMove(e) {
                if (this.moveObj.show) {
                    const x = e.offsetX
                    const y = e.offsetY;
                    const movex = (x - this.moveObj.startX) * this.stepScale;
                    const movey = (y - this.moveObj.startY) * this.stepScale;
                    this.moveObj.startX = x
                    this.moveObj.startY = y
                    this.handleMoveSelectList(movex, movey)
                    this.handleAlign()
                }
            },
            handleSelectMouseDown(e) {
                this.list.forEach((ele, index) => {
                    this.$refs['item_' + index][0].setActive(false)
                })
                this.selectObj.flag = false;
                this.selectObj.width = 0
                this.selectObj.height = 0;
                const x = e.layerX
                const y = e.layerY
                this.selectObj.startX = x
                this.selectObj.startY = y
                this.selectObj.left = x;
                this.selectObj.top = y;
                this.selectObj.show = true
                this.handleMouseDown();
            },
            handleSelectMouseMove(e) {
                if (this.selectObj.show) {
                    const x = e.layerX
                    const y = e.layerY;
                    this.selectObj.width = this.selectObj.width + x - this.selectObj.startX
                    this.selectObj.height = this.selectObj.height + y - this.selectObj.startY
                    this.selectObj.startX = x
                    this.selectObj.startY = y
                    this.handleAlign()
                }
            },
            handleSelectMouseUp() {
                if (this.selectObj.show) {
                    this.selectObj.show = false
                    if (this.selectObj.width != 0 && this.selectObj.height != 0) {
                        this.selectCount.x1 = this.selectObj.left * this.stepScale
                        this.selectCount.x2 = this.selectCount.x1 + this.selectObj.width * this.stepScale
                        this.selectCount.y1 = this.selectObj.top * this.stepScale
                        this.selectCount.y2 = this.selectCount.y1 + this.selectObj.height * this.stepScale
                        this.handleGetSelectList();
                        this.handleAlign()
                    }
                }
            },
            handlePostionSelect(postion) {
                const x1 = this.selectCount.maxx1;
                const x2 = this.selectCount.maxx2;
                const y1 = this.selectCount.maxy1;
                const y2 = this.selectCount.maxy2;
                const xa = x1 + x2
                const ya = y1 + y2
                if (postion === 'left') {
                    this.handleMoveSelectList(x1, undefined, true, postion);
                } else if (postion === 'center') {
                    this.handleMoveSelectList(x1 + (x2 - x1) / 2, undefined, true, postion);
                } else if (postion === 'right') {
                    this.handleMoveSelectList(x2, undefined, true, postion);
                } else if (postion === 'top') {
                    this.handleMoveSelectList(undefined, y1, true, postion);
                } else if (postion === 'middle') {
                    this.handleMoveSelectList(undefined, y1 + (y2 - y1) / 2, true, postion);
                } else if (postion === 'bottom') {
                    this.handleMoveSelectList(undefined, y2, true, postion);
                }
            },
            handleMoveSelectList(left, top, type, postion) {
                this.selectList.forEach(index => {
                    const ele = list[index];
                    const ele_component = ele.component;
                    //水平情况
                    if (left) {
                        let baseLeft = Number(type ? left : (ele.left + left).toFixed(2));
                        if (postion === 'right') {
                            baseLeft = baseLeft - ele_component.width
                        } else if (postion === 'center') {
                            const obj_center = ele.left + ele_component.width / 2;
                            baseLeft = ele.left + (left - obj_center)
                        }
                        this.$set(this.list[index], 'left', baseLeft);
                        this.$refs['item_' + index][0].setLeft(baseLeft)
                    }
                    //垂直情况
                    if (top) {
                        let baseTop = Number(type ? top : (ele.top + top).toFixed(2));
                        if (postion === 'bottom') {
                            baseTop = baseTop - ele_component.height
                        } else if (postion === 'middle') {
                            const obj_middle = ele.top + ele_component.height / 2;
                            baseTop = ele.top + (top - obj_middle)
                        }
                        this.$set(this.list[index], 'top', baseTop)
                        this.$refs['item_' + index][0].setTop(baseTop)
                    }
                })
                this.handleCalcPostionSelect();
                this.handleAlign()
            },
            handleGetSelectList() {
                this.selectList = [];
                this.list.forEach((ele, index) => {
                    const left = ele.left;
                    const top = ele.top;
                    const width = ele.component.width;
                    const height = ele.component.height;
                    if ((!ele.destruction && !ele.display)) {
                        if ((left >= this.selectCount.x1 && left <= this.selectCount.x2) && (top >= this.selectCount.y1 && top <= this.selectCount.y2)) {
                            this.selectList.push(index)
                        }
                    }
                })
                this.handleCalcPostionSelect();
                if (!this.validatenull(this.selectList)) {
                    this.selectList.forEach(index => {
                        this.$refs['item_' + index][0].setActive(true)
                    })
                    this.selectObj.flag = true;
                }

            },
            //计算多选状态下的最大边界值
            handleCalcPostionSelect() {
                this.selectCount.maxx1 = 99999;
                this.selectCount.maxy1 = 99999;
                this.selectList.forEach(index => {
                    const ele = this.list[index];
                    const left = ele.left;
                    const top = ele.top;
                    const width = ele.component.width;
                    const height = ele.component.height;
                    if (this.selectCount.maxx1 > left) {
                        this.selectCount.maxx1 = left;
                    }
                    if (this.selectCount.maxx2 < left + width) {
                        this.selectCount.maxx2 = left + width;
                    }
                    if (this.selectCount.maxy1 > top) {
                        this.selectCount.maxy1 = top;
                    }
                    if (this.selectCount.maxy2 < top + height) {
                        this.selectCount.maxy2 = top + height;
                    }
                })
            },
            handleDeleteSelect() {
                this.selectList.forEach(index => {
                    this.$set(this.list[index], 'destruction', true)
                })
                this.selectList = [];
                this.selectObj.flag = false;
            },
            handleExectSelect() {
                this.selectList.forEach(index => {
                    this.$refs['item_' + index][0].setActive(false)
                })
                this.selectList = [];
                this.selectObj.flag = false;
            },
            handleGetQuery(item) {
                return Object.assign(this.deepClone(this.config.query), item.dataQuery)
            },
            handleFormatter() {
                try {
                    this.activeObj.formatter = eval(this.activeObj.formatter);
                    this.activeObj.clickFormatter = eval(this.activeObj.clickFormatter);
                    this.activeObj.labelFormatter = eval(this.activeObj.labelFormatter);
                    this.$message.success('刷新成功')
                } catch (error) {
                    this.$message.error('检测参数错误，检查控制台')
                    this.$Log.danger(error)
                }
            },
            handleConClick({type, child, value}) {
                if (type === 'tabs') {
                    const indexList = child.index;
                    indexList.forEach((index) => {
                        const paramName = child.paramName;
                        let url = this.list[index].url;
                        if (url) {
                            this.list[index].url = addUrlParam(url, paramName, value);
                            this.$refs['list_' + index][0].updateData();
                        }
                    })
                }
            },
            handleRefresh() {
                this.activeObj.dataFormatter = eval(this.activeObj.dataFormatter);
                this.$refs['list_' + this.active][0].updateData();
                this.$message.success('刷新成功')
            },
            handleMouseOver(val) {
                this.list.forEach((ele, index) => {
                    this.$refs['item_' + index][0].setOverActive(index === val)
                });
            },
            initData() {
                this.list = list;
                this.config = config;
                // this.list.forEach((ele, index) => {
                //   this.$set(this.list, index, Object.assign(ele, {
                //     index,
                //     zIndex: (this.listLen - 1) - index
                //   }));
                // })
            },
            setScale(width) {
                this.$nextTick(() => {
                    this.config.scale = ((width || this.contentWidth) / this.config.width) * 100
                    this.scale = this.config.scale;
                })

            },
            setResize(type) {
                this.$nextTick(() => {
                    if (type === 'width') {
                        //重新设置缩放
                        this.setScale();
                        this.$refs.content.style.width = this.setPx((this.config.scale * this.config.width) / 100)
                    } else if (type === 'height') {
                        //重新设置缩放
                        this.setScale();
                        this.$refs.content.style.height = this.setPx((this.config.scale * this.config.height) / 100)
                    } else {
                        this.$refs.content.style.width = this.setPx((this.config.scale * this.config.width) / 100)
                        this.$refs.content.style.height = this.setPx((this.config.scale * this.config.height) / 100)
                    }
                })

            },
            formatTooltip(val) {
                return parseInt(val);
            },
            handleMouseDown() {
                this.active = -1;
            },
            handleTop(active) {
                this.activeObj.zIndex = this.listLen + 1;
            },
            handleStepTop(active) {
                this.activeObj.zIndex = this.activeObj.zIndex + 1;
                if (this.activeNextObj) this.activeNextObj.zIndex = this.activeNextObj.zIndex - 1;
            },
            handleStepBottom(active) {
                this.activeObj.zIndex = this.activeObj.zIndex - 1;
                if (this.activeBreakObj) this.activeBreakObj.zIndex = this.activeBreakObj.zIndex + 1
            },
            handleBottom(active) {
                this.list[active].zIndex = -1;
            },
            handleMapSelect(value) {
                this.activeOption.mapList = this.dicOption.mapList[value].list;
            },
            registerMap(selectProvince, prop) {
                EchartsMap.registerMap(selectProvince.name, (data) => {
                    if (prop === "map") {
                        this.activeOption.mapList = data;
                    }
                });
            },
            handleContextMenu(e) {
                this.$nextTick(() => {
                    if (this.active === -1) {
                        this.contentMenu = false;
                    } else {
                        this.contentMenuX = e.clientX;
                        this.contentMenuY = e.clientY;
                        this.contentMenu = true;
                    }
                })
            },
            handleChange(index, zindex) {
                this.active = index;
                this.zIndex = zindex;
                this.contentMenu = false;
            },
            handleFocus() {
                //清除表单校验
                this.clearValidate();
                this.gradeFlag = true;
            },
            handleBlur() {
                this.gradeFlag = false;
            },
            //  对齐事件
            handleAlign() {
                if (this.active == -1) {
                    return
                }
                let activeTop = this.list[this.active].top
                let activeLeft = this.list[this.active].left
                let flag = false
                for (let index = 0; index < this.list.length; index++) {
                    let item = this.list[index];
                    if (Math.abs(item.top - activeTop) < 2 && item.left !== activeLeft) {
                        flag = true
                        this.highline = true
                        break;
                    }
                    if (Math.abs(item.left - activeLeft) < 2 && item.top !== activeTop) {
                        flag = true
                        this.highline = true
                        break;
                    }
                }
                if (!flag) {
                    this.highline = false
                }

            },
            //键盘事件
            handleKeyboardEvent(e) {
                const preventDefault = () => {
                    e.preventDefault()
                    window.event ? window.event.cancelBubble = true : e.stopPropagation()
                }
                const rightWidth = this.config.width - this.activeComponent.width
                const bottomHeight = this.config.height - this.activeComponent.height
                if (this.activeObj != undefined) {
                    switch (e.keyCode) {
                        case 37 :
                            if (this.activeObj.left < 0) {
                                this.activeObj.left = 0
                            }
                            this.activeObj.left -= 10
                            preventDefault()
                            this.handleAlign()
                            break;
                        case 38 :
                            if (this.activeObj.top < 0) {
                                this.activeObj.top = 0
                            }
                            this.activeObj.top -= 10
                            preventDefault()
                            this.handleAlign()
                            break;
                        case 39 :
                            if (this.activeObj.left > rightWidth) {
                                this.activeObj.left = rightWidth
                            }
                            this.activeObj.left += 10
                            preventDefault()
                            this.handleAlign()
                            break;
                        case 40 :
                            if (this.activeObj.top > bottomHeight) {
                                this.activeObj.top = bottomHeight
                            }
                            this.activeObj.top += 10
                            preventDefault()
                            this.handleAlign()
                            break;
                    }
                    preventDefault()
                    return false
                }
            },
            handleKeyboardDel(e, active, index) {
                if (e.keyCode === 46) { //只能按del删除
                    const obj = this.activeObj
                    if (obj.name) {
                        this.$confirm("是否删除" + obj.name + "图层?", '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.list.splice(this.active, 1)
                        }).catch(() => {

                        });
                    }
                }
            },
            handleDel(index, zIndex) {
                const obj = this.list[index]
                this.$confirm("是否删除" + obj.name + "图层?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.active = -1;
                    this.$set(this.list[index], 'destruction', true)
                }).catch(() => {

                });
            },
            handleCopy(index, zIndex) {
                const obj = this.list[index]
                this.addCompoment(obj);
            },
            handleResize({index, width, height}) {
                const ele = this.list[index].component;
                this.$set(ele, 'width', width)
                this.$set(ele, 'height', height)

            },
            handlePostion({index, left, top}) {
                const ele = this.list[index];
                this.$set(ele, 'left', left)
                this.$set(ele, 'top', top)
            },
            rowSave(row, done) {
                this.activeKey.push(row);
                done()
            },
            rowDel(row, index) {
                this.activeKey.splice(index, 1);
            },
            rowUpdate(row, index, done) {
                this.activeKey.splice(index, 1, row);
                done()
            },
            addCompoment(option) {
                //清除表单校验
                this.$refs.saveForm.clearValidate();
                const obj = this.deepClone(option);
                obj.left = 0;
                obj.top = 0;
                obj.zIndex = this.listLen;
                obj.index = this.listLen;
                this.list.push(obj);
            },
            handleView() {
                this.menuFlag = false;
                this.active = -1;
                this.setScale(document.body.clientWidth);
            },
            handleReset() {
                this.menuFlag = true;
                this.setScale(this.contentWidth);
            },
            handleBuild() {
                this.dataVisible = true;
            },
            handleOpenImg(item) {
                this.imgObj = item
                this.imgVisible = true;
            },
            handleSetimg(val) {
                if (this.imgObj === 'activeObj.data') {
                    this.activeObj.data = "." + val;
                } else if (this.imgObj === 'activeOption.backgroundImage') {
                    this.activeOption.backgroundImage = "." + val;
                } else if (this.imgObj === 'activeOption.backgroundBorder') {
                    this.activeOption.backgroundBorder = val;
                } else if (this.imgObj === 'activeOption.empBackgroundBorder') {
                    this.activeOption.empBackgroundBorder = val;
                } else if (this.imgObj === 'config.backgroundImage') {
                    this.config.backgroundImage = val;
                } else if (this.imgObj === "activeOption.empBackgroundImage") {
                    this.activeOption.empBackgroundImage = "." + val;
                }
                this.imgVisible = false;
            }
        },
        destroyed() {
            //移除键盘事件
            window.removeEventListener('keydown', this.handleKeyboardDel)
            window.removeEventListener('keyup', this.handleKeyboardEvent)
            this.$emit("blur")
            this.selectObj.show = false
        },
    })
</script>

</html>